<!--
 * @Descripttion: 
 * @version: 
 * @Author: hzx
 * @Date: 2021-03-24 18:50:13
 * @LastEditors: hzx
 * @LastEditTime: 2021-05-14 15:39:24
-->
<template>
    <!-- 查询条件 -->
    <div class="condition">
        <a-select
            v-model:value="state.condition.courseName"
            style="width: 150px"
            placeholder="请选择课程"
            ref="class"
            @change="handleChange"
        >
            <a-select-option
                v-for="item in state.courseName"
                :key="item.course_name"
                :value="item.course_name"
                >{{ item.course_name }}</a-select-option
            >
        </a-select>
        <a-select
            class="select"
            v-model:value="state.condition.className"
            style="width: 150px"
            placeholder="请选择班级"
            ref="select"
            @change="handleChange"
        >
            <a-select-option
                v-for="item in state.class"
                :key="item.class_name"
                :value="item.class_name"
                >{{ item.class_name }}</a-select-option
            >
        </a-select>
        <a-button class="button" type="primary" @click="selectCourse()"
            >查询</a-button
        >
    </div>

    <!-- 表格区域 -->
    <a-table
        :rowKey="(record) => record.stu_id"
        :columns="columns"
        :data-source="state.data"
        bordered
    >
        <template #action="{ record }">
            <span>
                <a-button
                    class="button"
                    @click="showupStuModal(null, record.sc_id)"
                    >修改</a-button
                >
                <!-- <a-button
                    class="button"
                    type="dashed"
                    @click="error(record.stu_id)"
                    >删除</a-button
                > -->
            </span>
        </template>
    </a-table>
    <!-- 修改信息弹窗 -->
    <a-modal
        v-model:visible="upvisible"
        :title="upStuData.course_name + '成绩'"
        ok-text="确认"
        cancel-text="取消"
        @ok="updateStuModal(upStuData)"
    >
        <a-form
            :model="upStuData"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
        >
            <a-form-item label="姓名">
                <a-input
                    disabled
                    placeholder="请输入你的姓名"
                    v-model:value="upStuData.stu_name"
                />
            </a-form-item>

            <a-form-item label="学号">
                <a-input
                    disabled
                    placeholder="请输入你的学号"
                    v-model:value="upStuData.stu_id"
                />
            </a-form-item>
            <a-form-item label="班级">
                <a-input
                    disabled
                    placeholder="请输入你的班级"
                    v-model:value="upStuData.class_name"
                />
            </a-form-item>
            <a-form-item label="成绩">
                <a-input
                    placeholder="请输入学生成绩"
                    v-model:value="upStuData.grade"
                />
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script>
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { defineComponent, createVNode, reactive, onMounted, ref } from "vue";
import { Modal } from "ant-design-vue";
import { useStore } from "vuex";
import {
    getCourseList,
    getCourseName,
    getClassName,
    selectCouCla,
    updateCourse,
} from "@/api/course";
const columns = [
    {
        title: "课程名称",
        dataIndex: "course_name",
        key: "course_name",
        ellipsis: true,
    },
    {
        title: "班级",
        dataIndex: "class_name",
        key: "class",
    },
    {
        title: "学号",
        dataIndex: "stu_id",
        key: "stu_id",
        ellipsis: true,
    },
    {
        title: "姓名",
        dataIndex: "stu_name",
        key: "name",
    },
    {
        title: "成绩",
        dataIndex: "grade",
        key: "grade",
        ellipsis: true,
    },
    // {
    //     title: "性别",
    //     dataIndex: "stu_sex",
    //     key: "sex",
    //     ellipsis: true,
    //     customRender({ record }) {
    //         return record.stu_sex === 1 ? "男" : "女"; //0是男，1是女
    //     },
    // },

    {
        title: "操作",
        key: "action",
        slots: { customRender: "action", dataIndex: "grade_id" },
    },
];

export default defineComponent({
    setup() {
        let state = reactive({
            data: [],
            class: [],
            courseName: [],
            condition: {
                className: "请选择班级",
                courseName: "请选择课程",
            },
        });
        const store = useStore();
        onMounted(async () => {
            //获取学生信息
            state.data = await getCourseList(store.state.resourceId.t_id);
            //获取课程信息
            state.courseName = await getCourseName(store.state.resourceId.t_id);
            //获取班级信息
            state.class = await getClassName(store.state.resourceId.t_id);
        });

        //查询信息
        async function selectCourse() {
            state.data = await selectCouCla(state.condition);
        }
        const handleChange = (value) => {
            ////console.log(state.condition);
        };

        //修改学生成绩
        const upvisible = ref(false);
        const showupStuModal = async (t_id, sc_id) => {
            //获取当前学生信息
            let [data] = await getCourseList(t_id, sc_id);
            upStuData.stu_name = data.stu_name;
            upStuData.stu_id = data.stu_id;
            upStuData.class_name = data.class_name;
            upStuData.grade = data.grade;
            upStuData.course_name = data.course_name;
            upStuData.sc_id = data.sc_id;
            //console.log(upStuData);
            //打开修改对话框
            upvisible.value = true;
        };
        const updateStuModal = async (upStuData) => {
            //console.log(upStuData);
            //修改学生信息
            await updateCourse(upStuData);
            upvisible.value = false;
            //更新学生视图
            state.data = await getCourseList(store.state.resourceId.t_id);
        };

        let upStuData = reactive({
            sc_id: "",
            course_name: "",
            stu_name: "",
            stu_id: "",
            class_name: "",
            grade: null,
        });

        return {
            //获取学生信息
            state,
            columns,
            //多选框
            handleChange,
            //查询
            selectCourse,
            //修改学生成绩
            upvisible,
            showupStuModal,
            updateStuModal,
            upStuData,
            //表单
            labelCol: {
                span: 6,
            },
            wrapperCol: {
                span: 15,
            },
        };
    },
});
</script>

<style lang="less" scoped>
.condition {
    margin-bottom: 20px;
    .select {
        margin-left: 20px;
    }
    .button {
        margin-left: 20px;
    }
}
</style>